<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      width: 100%;
      height: 100vh;
      background-color: #fff6fc;
      text-align: center;
    }

    #wrapper {
      margin-top: 20px;
      display: inline-block;
      width: 400px;
      height: 100px;
      background-color: black;
      color: #fff;
      line-height: 100px;
      font-size: 40px;
      border-radius: 8px;
    }

    #btn {
      width: 200px;
      background-color: #3eaf7c;
      color: #ffffff;
      height: 60px;
      font-size: 30px;
      border-radius: 20px;
      margin-top: 100px;
    }
  </style>
</head>
<body>
<div id="box">
  <button id="btn">开始点名</button>
  <br>
  <br>
  <img src="image/开奖.gif" width="400" style="border-radius: 10px" alt="">
  <br>
  <div id="wrapper">

  </div>
</div>

<script>

  var usernames = [
    '贺鹏',
    '董臻',
    '房卓文',
    '郭晓静',
    '贾志磊',
    '纪保情',
    '李凤',
    '马凯微',
    '孟轩槿',
    '宋晴',
    '唐泽',
    '佟金龙',
    '王梦江',
    '王庆坤',
    '王佳鑫',
    '闫清倩',
    '杨晓妍',
    '赵孟凡',
    '祝成',
    '张浩明',
    '张云如意',
    '陈希然',
    '韩金旗',
    '杨云涵',
    '张鹏欢',
  ];
  var flag = true;
  var timer = null;
  wrapper.innerHTML = '开始抽奖';
  let nameIndex = -1;
  btn.onclick = function () {
    if (usernames.length <= 0) {
      alert('已无人可用');

      return;
    }
    if (flag) {
      timer = setInterval(() => {
        nameIndex = parseInt((Math.random() * (usernames.length)));
        wrapper.innerHTML = usernames[nameIndex];
      }, 100);

      btn.innerHTML = '停止抽奖';
    } else {
      btn.innerHTML = '开始抽奖';
      clearInterval(timer);
      if (usernames.length > 0) {
        let res = usernames.splice(nameIndex, 1);
        console.log(res);
      } else {
        alert('已无人可用');
      }
    }
    flag = !flag;
  }

</script>
</body>
</html>
